<template>
  <n-card :title="props.PanelName">
    <template #header-extra>
      <n-space justify="end">
        <n-tag type="warning"> {{stageMenuMap.get('0')}} : {{dataInfo.get('0')?dataInfo.get('0').length:0}}</n-tag>
        <n-tag type="error"> {{stageMenuMap.get('1')}} : {{dataInfo.get('1')?dataInfo.get('1').length:0}}</n-tag>
        <n-tag type="success"> {{stageMenuMap.get('2')}} : {{dataInfo.get('2')?dataInfo.get('2').length:0}}</n-tag>
        <n-tag type="default"> {{stageMenuMap.get('3')}} : {{dataInfo.get('3')?dataInfo.get('3').length:0}}</n-tag>
        <n-tag type="info"> {{stageMenuMap.get('4')}} : {{dataInfo.get('4')?dataInfo.get('4').length:0}}</n-tag>
        <n-tag type="default"> {{stageMenuMap.get('5')}} : {{dataInfo.get('5')?dataInfo.get('5').length:0}}</n-tag>
        <n-button type="error" size="small" dashed @click="onDeletePanel">
          删除面板
        </n-button>
        <n-button type="success" size="small" dashed @click="addNewTaskPanel">
          修改面板
        </n-button>
        <n-switch v-model:value="switchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </n-space>
    </template>
    <n-tabs
        type="line"
        size="small"
        :tabs-padding="1"
        pane-style="padding: 1px;"
        v-model:value="sigleTaskBoardTabName"
        v-show="!switchValue"
    >
      <n-tab-pane name="目标列表">
<!--        {{table.dataList.value}}-->
        <TableBody>
          <template #header>
            <TableHeader ref="tableHeaderRef" :show-filter="false">
              <template #top-right>
                <n-button type="primary" size="small" @click="onAddItem(1)">
                  添加步骤任务
                </n-button>
                <n-button type="primary" size="small" @click="onAddItem(2)">
                  添加打卡任务
                </n-button>
              </template>
            </TableHeader>
          </template>
          <template #default>
            <n-layout
                has-sider
                style="height: 600px"
            >
              <n-layout-sider
                  bordered
                  show-trigger
                  collapse-mode="width"
                  :collapsed-width="64"
                  :width="150"
                  :native-scrollbar="false"
                  style="max-height: 500px"
              >
                <n-menu
                    v-model:value="showTaskPanelState"
                    :collapsed-width="64"
                    :collapsed-icon-size="22"
                    :options="satgeMenuOptions"
                    :on-update:value="updateState"
                />
              </n-layout-sider>
              <n-layout-content content-style="padding: 24px;">
                <n-data-table
                    :loading="table.tableLoading.value"
                    :data="table.dataList.value as Array<object>"
                    :row-key="rowKey"
                    :columns="tableColumns"
                    :scroll-x="500"
                    :style="{ height: `${table.tableHeight.value*2.7}px` }"
                    :flex-height="true"
                    :row-props="rowProps"
                    :pagination="{ pageSize: 15 }"
                    :bordered="false"
                />
                <n-dropdown
                    placement="bottom-start"
                    trigger="manual"
                    :x="xRef"
                    :y="yRef"
                    :options="options"
                    :show="showDropdownRef"
                    :on-clickoutside="onClickoutside"
                    @select="handleSelect"
                />
              </n-layout-content>
            </n-layout>

            <!--          @update:checked-row-keys="onRowCheck"-->

          </template>
        </TableBody>
      </n-tab-pane>
      <n-tab-pane name="日历模式">
        <TaskCalendar :events="events" :time-zone="'local'" :key="calendarKey"
                      :finish-events="finishEvents"
                      :no-time-events="noTimeEvents"></TaskCalendar>
      </n-tab-pane>
      <n-tab-pane name="完成标记">
        <TaskSuccessCaledar :time-zone="'local'"></TaskSuccessCaledar>
      </n-tab-pane>
    </n-tabs>
  </n-card>

  <ModalDialog ref="modalDialogRef" @confirm="onDataFormConfirm">
    <template #content>
      <DataForm ref="dataFormRef" :options="formItems" :form-config="formConfig"/>
    </template>
  </ModalDialog>
  <TaskEditDrawer v-model="formData"></TaskEditDrawer>
  <TaskMoveModal v-model="taskMoveData"></TaskMoveModal>
</template>
<script lang="ts">
import {TableActionModel, usePagination, useRenderAction, useRowKey, useTable, useTableColumn} from "@/hooks/table";
import {
  DataTableColumn,
  FormProps, MenuOption,
  NAvatar,
  NDrawer,
  NInput, NTag, NText,
  NTime,
  SelectOption,
  useDialog,
  useMessage
} from "naive-ui";
import {post, Response} from "@/api/http";
import {
  addLifeModeItems,
  addStage,
  changeGoalState,
  changeLifeModeItemsOrder,
  changeStageOrder,
  changeStageState,
  changeTaskOrder,
  changeTaskState,
  deleteStage,
  deleteTask, finishTask,
  getFieldSelect,
  getGoalSelect,
  getStageById,
  getStagesList,
  getTableList, getTaskPanelInfo,
  getTasksList, startTaskRecord
} from "@/api/url";
import {defineComponent, h, onMounted, ref, watch, defineProps, nextTick, reactive, onBeforeMount, computed} from "vue";
import {renderSelect, renderTag, renderTimePicker, renderTreeSelect,renderIcon} from "@/hooks/form";
import GoalTree from "@/views/field/goal/GoalTree.vue";
import useUserStore from "@/store/modules/user";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import { DataFormType, ModalDialogType, FormItem } from '@/types/components'
import {TreeSelectOption} from "naive-ui/lib/tree-select/src/interface";
import { Book } from "@vicons/ionicons5";
import {UseConstsStore} from "@/store/modules/consts";
import pinia from "@/store/pinia";
import {changeTimeUnit, convertEvent, obj2Map, timestampToDateTime} from "@/utils";
import Sortable from "sortablejs";
import {TimeMentionModal, TaskData, StageData, TaskPanel, TaskMoreData} from "@/views/model/model";
import TaskEditDrawer from "@/views/task/TaskEditDrawer.vue";
import MyTime from "@/views/task/time/MyTime.vue";
import GoalPanel from "@/views/field/goal/GoalPanel.vue";
import TaskCalendar from "@/views/taskoperation/recordTime/TaskCalendar.vue";
import TaskSuccessCaledar from "@/views/taskoperation/recordTime/TaskSuccessCaledar.vue";
import TaskMoveModal from "@/views/task/TaskMoveModal.vue";
import moment from "moment-timezone";
import {useRouter} from "vue-router";

export default defineComponent({
  name: 'SingleTaskBoard',
  components: {TaskMoveModal, TaskSuccessCaledar, TaskCalendar, GoalPanel, MyTime, TaskEditDrawer, NDrawer},
  props:{
    index:Number,
    PanelName:String,
    type:Number
  },
  setup(props) {
    const key = ref<number>(new Date().getTime())
    const calendarKey = ref<number>(new Date().getTime())
    const table = useTable()
    const rowKey = useRowKey('id')
    const naiveDialog = useDialog()
    const message = useMessage()
    const userStore = useUserStore()
    const useSurfaceSetting = UseSurfaceSettingStore()
    const useConsts = UseConstsStore()
    const router = useRouter()
    // const pagination = usePagination(doRefresh)
    const checkedRowKeys = [] as Array<any>
    const surfaceSetting = useSurfaceSetting.getSurfaceSetting();
    const satgeMenuOptions = computed(()=>{
      return useConsts.getLabelValue(useConsts.getConsts().panelStateMap)
          .map(u=>{return {...u,icon:renderIcon(Book),key:u.value}});
    })
    const stageMenuMap = computed(()=>{
      return obj2Map(useConsts.getConsts().panelStateMap)
    })
    const taskTypes = computed(()=>{
      return obj2Map(useConsts.getConsts().taskTypeMap);
    })
    const showTaskPanelState = ref('0')
    const sigleTaskBoardTabName = ref('目标列表');
    const switchValue = ref(props.index!==undefined?surfaceSetting.taskPanels[props.index]?.switchValue:false)
    watch(switchValue, ()=>{
      if(props.index!==undefined && surfaceSetting.taskPanels[props.index])
        surfaceSetting.taskPanels[props.index].switchValue = switchValue.value
    })
    let dataInfo = ref(new Map());

    const taskMoveData = reactive({
      id:0,
      toMove: false,
      stageId:0,
      fieldId:0,
      oldStageId:0,
      oldFieldId:0,})
    watch(taskMoveData,()=>{
      if(!taskMoveData.toMove) doRefresh()
    })

    // 面板处理
    const goalSelect:Array<any> = [];
    const getGoalSelectFromBack = async ()=>{
      try {
        const data: Response = await post({
          url: getGoalSelect,
          data: {haveFinish:false},
          token:userStore.getToken()
        });
        // console.log(data.data.data)
        goalSelect.splice(0);
        goalSelect.push(...data.data.data)
        // console.log(goalSelect)
      }catch(e) {
        message.error((e as Error).message)
      }finally {
      }
    }
    const formConfig = {
      labelWidth: 100,
      size: 'medium',
      labelAlign: 'right',
    } as FormProps
    const modalDialogRef = ref<ModalDialogType | null>(null)
    const dataFormRef = ref<DataFormType | null>(null)
    async function onDataFormConfirm() {
      if (dataFormRef.value?.validator()) {
        modalDialogRef.value?.toggle()
        const params = {...dataFormRef.value.generatorParams()}
        if(props.index !== undefined) {
          const item: any = useSurfaceSetting.getSurfaceSetting().taskPanels.at(props.index)
          Object.assign(item, params)
        }
      }
    }
    const formItems = [
      {
        label: '名称',
        key: 'name',
        value: ref(null),
        validator: (formItem, message) => {
          if (!formItem.value.value) {
            message.error('请输入角色名称')
            return false
          }
          return true
        },
        render: (formItem) => {
          return h(NInput, {
            value: formItem.value.value,
            onUpdateValue: (val) => {
              formItem.value.value = val
            },
            placeholder: '请输入角色名称',
          })
        },
      },
      {
        label: '目标',
        key: 'goalIds',
        value: ref(useSurfaceSetting.getSurfaceSetting().showGoalId[0]),
        optionItems: goalSelect,
        reset:(formItem)=>{
          formItem.value.value =''
        },
        render: (formItem) =>
            renderSelect(formItem.value, formItem.optionItems as SelectOption[], {
              placeholder: '请选择会议类型',
              clearable: true,
              filterable:true,
              multiple:true
            }),
      },

    ] as FormItem[]
    const addNewTaskPanel = async ()=>{
      modalDialogRef.value?.toggle()
      await getGoalSelectFromBack()
      nextTick(() => {
        if(props.index !== undefined){
          const item: any = useSurfaceSetting.getSurfaceSetting().taskPanels.at(props.index)
          console.log(item)
          if(item) {
            formItems.forEach((it) => {
              const key:any = it.key
              const propName = item[key]
              console.log(item[key])
              if (propName) {
                it.value.value = propName
              }
            })
            key.value = Date.now();
          }
        }
      })
    }
    function onDeletePanel() {
      naiveDialog.warning({
        title: '提示',
        content: '确定要删除此面板吗？',
        positiveText: '确定',
        onPositiveClick: async () => {
          if(useSurfaceSetting.getSurfaceSetting().taskPanels.length > 1 &&  props.index !== undefined){
            useSurfaceSetting.getSurfaceSetting().taskPanels.splice(props.index, 1)
            key.value = Date.now();
          }
        },
      })
    }

    const updateState = (key: string, item: MenuOption)=>{
      // 重新获取数据
      showTaskPanelState.value = key
      console.log(key)
      table.dataList.value = dataInfo.value.get(showTaskPanelState.value)
    }

    // 表单处理
    const tableColumns = useTableColumn(
        [
          // table.selectionColumn,
          // table.indexColumn,
          {
            title: 'id',
            key: 'id',
          },
          {
            title: '任务名',
            key: 'name',
          },
          {
            title: '任务类型',
            key: 'type',
            render: (rowData:any) => {
              let str = "";
              //console.log(taskTypes.get(rowData.type),rowData.type,taskTypes)
              if(rowData.type!==undefined){
                const s = taskTypes.value.get(rowData.type.toString())
                str = s?s:"";
              }
              return renderTag(str, {size: 'small',})
            }
          },
          {
            title: '提醒时间',
            key: 'mentionTime',
            render: (rowData) => {
              return h(MyTime,{
                time:rowData.mentionTime,
                type:"datetime"
              },{})
            }
          },
          {
            title: '截止时间',
            key: 'timeMentionModal.deadLine',
            render: (rowData:any) => {
              return h(MyTime,{
                time:rowData.timeMentionModal.deadLine,
                type:"datetime"
              },{})
            }
          },
          {
            title: '描述',
            key: 'desc',
            width: 100,
            ellipsis: {
              tooltip: true,
            },
          },
          {
            title: '阶段',
            key: 'stageName',
          },
          {
            title: '领域',
            key: 'fieldName',
          },
          {
            title: '目标',
            key: 'goalName',
          },
          {
            title: '所花时间',
            key: 'takeTime',
            render: (rowData:any) => {
              return h(NText,{},{
                default: () => changeTimeUnit(rowData.takeTime),
              })
            }
          },
          {
            title: '完成率',
            key: 'finishRatio',
          },
          {
            title: '操作',
            key: 'actions',
            render: (rowData:any) => {
              return useRenderAction([
                {
                  label: '计时',
                  type:'default',
                  onClick: recordTime.bind(null, rowData),
                }
              ] as TableActionModel[])
            },
          },
        ],
        {
          align: 'center',
        } as DataTableColumn
    )

    // 日历数据
    const events = ref<Array<any>>([])
    const finishEvents = ref<Array<any>>([])
    const noTimeEvents = ref<Array<any>>([])
    const getEvents = () => {
      /**
       *     public static int panel_state_need_process = 0; // "需处理"： 提醒日期晚于当前
       *     public static int panel_state_expired = 1; // "过期"： 截止日期早于当前
       *     public static int panel_state_safe = 2; // "安全期"：  提醒日期早于当前
       *     public static int panel_state_no_date = 3; // "未指定日期"：  没有提醒日期
       *     public static int panel_state_not_start = 4; // "未开始"
       *     public static int panel_state_over = 5; // "已结束"
       */
      console.log(events.value,surfaceSetting.sigleTaskBoardTabName)
      console.log(events.value,"++++++++++++++++",dataInfo)
      events.value = [];
      let results = dataInfo.value.get('2');
      console.log(results)
      if (results !== undefined && results.length > 0) {
        for (const rowDatum of results) {
          putEvent(rowDatum, false, "green");
        }
      }
      results = dataInfo.value.get('1');
      if (results !== undefined && results.length > 0) {
        for (const rowDatum of results) {
          putEvent(rowDatum, false, "red");
        }
      }
      results = dataInfo.value.get('0');
      if (results !== undefined && results.length > 0) {
        for (const rowDatum of results) {
          putEvent(rowDatum, false, "yellow");
        }
      }
      results = dataInfo.value.get('4');
      if (results !== undefined && results.length > 0) {
        for (const rowDatum of results) {
          putEvent(rowDatum, false, "blue");
        }
      }
      results = dataInfo.value.get('3');
      if (results !== undefined && results.length > 0) {
        for (const rowDatum of results) {
          putEvent(rowDatum, false, "black");
        }
      }
      results = dataInfo.value.get('5');
      if (results !== undefined && results.length > 0) {
        for (const rowDatum of results) {
          putEvent(rowDatum, true, "gray");
        }
      }

      events.value = convertEvent(events.value, userStore.timezone)
      finishEvents.value = convertEvent(finishEvents.value, userStore.timezone)
      noTimeEvents.value = convertEvent(noTimeEvents.value, userStore.timezone)
    };
    const putEvent = (rowDatum: TaskMoreData, finish: boolean, color: string) => {
      if (rowDatum !== undefined) {
        if (rowDatum.timeMentionModal.deadLine) {
          const e = {
            title: rowDatum.name,
            ...rowDatum.timeMentionModal,
            ...rowDatum,
            date: rowDatum.timeMentionModal.deadLine,
            // start:rowDatum.timeMentionModal.deadLine,
            // end:rowDatum.timeMentionModal.deadLine,
            color: color,
            description: rowDatum.desc,
          };
          if (finish) finishEvents.value.push(e);
          else events.value.push(e);
        } else {
          if (!finish) {
            const ddl = Date.now();
            const e = {
              title: rowDatum.name,
              date: ddl,
              // end:ddl,
              color: "black",
              description: rowDatum.desc,
            };
            noTimeEvents.value.push(e);
          }
        }
      }
      calendarKey.value = Date.now()
    };
    // 加载数据
    async function doRefresh() {
      // await getInfoFromBack()
      // 获取阶段的信息
      // console.log("++++++++++++++++",info.data.tasks)
      if(props.index !== undefined){
        const taskPanel: any = useSurfaceSetting.getSurfaceSetting().taskPanels.at(props.index)
        // console.log({taskIds:taskIds,finishStageId:finishStageId})
        post({
          url: getTaskPanelInfo,
          data: {ids:taskPanel.goalIds, currentTime:Date.now()},
          token:userStore.getToken()
        }).then(async (res: Response) => {
          // console.log(res.data.data)
          if(res.data.data) dataInfo.value = obj2Map(res.data.data)
          await table.handleSuccess({data:dataInfo.value.get(showTaskPanelState.value)})
          getEvents()
          // console.log(table.dataList)
        }).catch(console.log)
        if(table.dataList.value) table.dataList.value=[];
        table.tableLoading.value = false
        // console.log(table.dataList.value)
      }

    }
    onMounted(doRefresh)
    // 添加/编辑框
    const formData = reactive({
      show:false,
      taskPanel:true,
      key:Date.now(),
      edit:true,
      data:TaskData.getNewTaskData(parseInt(showTaskPanelState.value),1,null)
    })
    watch(formData,async ()=>{
      // console.log(formData.key, key.value)
      if(formData.key !== key.value){
        // await getInfoFromBack()
        // await doRefresh()
        key.value = Date.now()
      }
    })
    watch(key, async ()=>{
      // console.log(key,"+++++++++++++")
      // await getInfoFromBack()
      await doRefresh()
      formData.key= key.value
    })


    // 删除添加
    function onAddItem(type:number) {
      formData.data = TaskData.getNewTaskData(0,type,null)
      formData.show = true
    }
    function onUpdateItem(item: TaskData|null) {
      if(item){
        formData.data = item
        console.log(formData.data)
        formData.show = true
      }
    }
    function onCopyItem(item: TaskData|null) {
      if(item){
        const newItem = {...item}
        newItem.id = null;
        newItem.state = 0;
        newItem.name = ''
        newItem.desc = ''
        formData.data = newItem
        // console.log(formData.data)
        formData.show = true
      }
    }
    function onDeleteItem(item: any) {
      naiveDialog.warning({
        title: '提示',
        content: '确定要删除此数据吗？',
        positiveText: '确定',
        onPositiveClick: async () => {
          table.dataList.value!.splice(table.dataList.value!.indexOf(item), 1)
          try {
            // table.tableLoading.value = true;
            const data: Response = await post({
              url: deleteTask,
              data: item,
              token:userStore.getToken()
            });
            // console.log(data)
            message.success(data.msg)
          }catch(e) {
            message.error((e as Error).message)
          }finally {
            // table.tableLoading.value = false;
          }
        },
      })
    }
    const finishTaskFunc = async (fial:boolean, taskId:number|null|undefined,ddl:number,mentionTime:number) => {
      try {
        const data : Response = await post({
          url: finishTask,
          data: {id:taskId, fail:fial,mentionTime:mentionTime,deadLine:ddl},
          token:userStore.getToken()
        });
        // console.log(data)
        message.success(data.msg)
      }catch(e) {
        message.error((e as Error).message)
      }finally {
        key.value = Date.now()
      }
    }
    const changeState = async (params:any) => {
      // table.tableLoading.value = true;
      try {
        const data : Response = await post({
          url: changeTaskState,
          data: params,
          token:userStore.getToken()
        });
        // console.log(oldState,newState)
        message.success(data.msg)
      }catch(e) {
        message.error((e as Error).message)
      }finally {
        key.value = new Date().getTime()
        // table.tableLoading.value = false;
      }
    }
    const recordTime = (rowData:any)=> {
      post({
        url: startTaskRecord,
        data: {id: rowData.id, startTime: Date.now(), recordType: 1},
        token: userStore.getToken()
      }).then((data: Response) => {
        console.log(data.data.data,"+++++++++++++")
        useSurfaceSetting.setSurfaceSetting(data.data.data)
        message.success(data.msg)
        surfaceSetting.recordWarning = true;
      }).catch(e => {
        message.error((e as Error).message)
      }).finally(()=>{

      });
    }

    // 下来菜单
    let chooseRow:TaskMoreData|null = null;
    const options = [
      {
        label: "编辑",
        key: "edit",
      },
      {
        label: "复制",
        key: "copy",
      },
      {
        label: "完成任务",
        key: "success",
      },
      {
        label: "任务失败",
        key: "fail",
      },
      {
        label: "查看阶段任务",
        key: "show",
      },
      {
        label: "开启任务",
        key: "start",
      },
      {
        label: "暂停任务",
        key: "stop",
      },
      {
        label: "结束任务",
        key: "finish",
      },
      {
        label: "移动",
        key: "move",
      },
      {
        label: () => h("span", { style: { color: "red" } }, "删除"),
        key: "delete",
      },
    ];
    const showDropdownRef = ref(false);
    const xRef = ref(0);
    const yRef = ref(0);
    const onClickoutside = () => {
      showDropdownRef.value = false;
    };
    function onFinishGoal(params: TaskMoreData|null, str:string, newState:number){
      if(params){
        naiveDialog.warning({
          title: '提示',
          content: '是否要选择'+str+'该任务:'+params.name+'？',
          positiveText: '确定',
          onPositiveClick:() => {
            changeState({id:params.id, stageId:params.stageId,taskType:params.type,oldState:params.state,newState:newState})
            formData.key = Date.now()
          },
        })
      }
    }

    const handleSelect = async (key: string, node: string) => {
      // console.log(key, node);
      showDropdownRef.value = false;
      if (key == "edit") {
        onUpdateItem(chooseRow)
      }
      if (key == "delete") {
        onDeleteItem(chooseRow)
      }
      if(key == "show"){
        if(chooseRow?.stageId)
          useSurfaceSetting.addIdToArray(chooseRow.stageId,useSurfaceSetting.getSurfaceSetting().showStageId)
        router.replace({
          path: '/task/TaskPanel', // route.query.redirect ? (route.query.redirect as string) : '/',
        })
      }
      if(key == "success"){
        if(chooseRow && chooseRow.type){
          // console.log(new Date(chooseRow.timeMentionModal.deadLine),new Date(chooseRow.timeMentionModal.beginMentionTime))
          chooseRow.timeMentionModal.beginMentionTime = chooseRow.timeMentionModal.deadLine
          const mentionTime = TimeMentionModal.computeMentionTime(chooseRow.timeMentionModal,chooseRow.type)
          const ddl = TimeMentionModal.computeNextClockTime(chooseRow.timeMentionModal,chooseRow.type)
          // console.log(new Date(ddl),new Date(chooseRow.timeMentionModal.deadLine))
          await finishTaskFunc(false,chooseRow.id,ddl,mentionTime)
          if(chooseRow.type === 1) await changeState({id:chooseRow.id, stageId:chooseRow.stageId,taskType:chooseRow.type,oldState:chooseRow.state,newState:3})
        }
      }
      if(key == "fail"){
        if(chooseRow && chooseRow.type){
          chooseRow.timeMentionModal.beginMentionTime = chooseRow.timeMentionModal.deadLine
          const mentionTime = TimeMentionModal.computeMentionTime(chooseRow.timeMentionModal,chooseRow.type)
          const ddl = TimeMentionModal.computeNextClockTime(chooseRow.timeMentionModal,chooseRow.type)
          await finishTaskFunc(true,chooseRow.id,ddl,mentionTime)
          if(chooseRow.type === 1) await changeState({id:chooseRow.id, stageId:chooseRow.stageId,taskType:chooseRow.type,oldState:chooseRow.state,newState:3})
        }
      }
      const str = key==='start'?'开启':key==='stop'?'暂停':'结束';
      if (key == "start") {
        onFinishGoal(chooseRow,str,0)
      }
      if (key == "stop") {
        onFinishGoal(chooseRow,str,1)
      }
      if (key == "finish") {
        onFinishGoal(chooseRow,str,3)
      }
      if (key == "move") {
        // onFinishGoal(chooseRow,str,3)
        taskMoveData.id = <number>chooseRow?.id
        taskMoveData.fieldId = <number>chooseRow?.fieldId
        taskMoveData.oldFieldId = <number>chooseRow?.fieldId
        taskMoveData.stageId = <number>chooseRow?.stageId
        taskMoveData.oldStageId = <number>chooseRow?.stageId
        taskMoveData.toMove = true
      }
      if(key == "copy"){
        onCopyItem(chooseRow)
      }
    };
    const rowProps = (row:TaskMoreData) => {
      return {
        // 双击
        ondblclick: (e: MouseEvent) => {
          e.preventDefault()
          // message.info(JSON.stringify(row, null, 2));
          showDropdownRef.value = true;
          xRef.value = e.clientX;
          yRef.value = e.clientY;
          // console.log('rowProps',row)
          chooseRow = row
        },
        onContextmenu: (e: MouseEvent) => {
          e.preventDefault()
          // message.info(JSON.stringify(row, null, 2));
          showDropdownRef.value = true;
          xRef.value = e.clientX;
          yRef.value = e.clientY;
          // console.log('rowProps',row)
          chooseRow = row
        },
      };
    };

    function onRowCheck(rowKeys: Array<any>) {
      checkedRowKeys.length = 0
      checkedRowKeys.push(...rowKeys)
    }
    return {
      sigleTaskBoardTabName,showTaskPanelState,
      events,finishEvents,noTimeEvents,calendarKey,switchValue,stageMenuMap,dataInfo,
      surfaceSetting,updateState,
      addNewTaskPanel,formConfig,modalDialogRef,dataFormRef,onDataFormConfirm,formItems,onDeletePanel,
      key,taskMoveData,
      formData,
      xRef,yRef,options,handleSelect,onClickoutside,showDropdownRef,
      satgeMenuOptions,
      rowProps,
      props,onAddItem,
      table,
      rowKey,checkedRowKeys,onDeleteItem,
      onRowCheck,tableColumns,
      pattern: ref(''),
    }
  },
})

</script>

<style lang="scss" scoped>
.avatar-container {
  position: relative;
  width: 30px;
  margin: 0 auto;
  vertical-align: middle;
  .avatar {
    width: 100%;
    border-radius: 50%;
  }
  .avatar-vip {
    border: 2px solid #cece1e;
  }
  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}
.gender-container {
  .gender-icon {
    width: 20px;
  }
}
</style>